<%--
  Created by IntelliJ IDEA.
  User: 59913
  Date: 2021/11/22
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>,
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>Title</title>
    <base href="<%=basePath%>">
<%--    <link rel="stylesheet" href="static/hplus/css/bootstrap.min.css">--%>
<%--    <link rel="stylesheet" href="static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css">--%>
<%--    <link rel="stylesheet" href="static/hplus/css/plugins/sweetalert/sweetalert.css">--%>
<%--    <script src="static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>--%>
<%--    <script src="static/hplus/js/jquery.min.js"></script>--%>
<%--    <script src="static/hplus/js/bootstrap.min.js"></script>--%>
<%--    <script src="static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>--%>
<%--    <script src="static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>--%>
    <link href="/static/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link rel="stylesheet" href="/static/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/hplus/css/plugins/sweetalert/sweetalert.css">
    <script type="text/javascript" src="/static/hplus/js/jquery.min.js"></script>
    <script src="/static/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script type="text/javascript" src="/static/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="/static/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="/static/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>
</head>
<body class="container-fluid">
    <div class="panel panel-default">
        <h3>用户信息列表</h3>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-primary" onclick="toadd()">
                        <span class="glyphicon glyphicon-heart-empty"></span>&nbsp;&nbsp;增加
                    </button>
                    <button class="btn btn-primary" onclick="dodel()" >
                        <span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;删除
                    </button>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-12">
                    <table id="user" class="table"></table>
                </div>
            </div>
        </div>
    </div>
    <!--分配角色对话框-->
    <div class="modal fade" id="fenpei" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" >提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" id="juesebody">

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button onclick="dofenpei()" type="button" class="btn btn-primary">分配</button>
                </div>
            </div>
        </div>
    </div>
    <%--    添加角色对话框--%>
    <div class="modal fade" id="add" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="t">添加角色</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-12" id="addUser">
                            <form method="post" class="form-horizontal">
                                <div class="form-group">
                                    <label for="userName" class="col-sm-2 control-label">用户名</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="userName" name="=userName" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="pwd" class="col-sm-2 control-label">密码</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="pwd" name="=pwd" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-2 control-label">状态</label>
                                    <div class="col-sm-2">
                                        <input type="radio" id="state1" name="=state" value="0" checked> 启用
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="radio" id="state2" name="=state" value="1"> 禁用
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="workname" class="col-sm-2 control-label">昵称</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="workname" name="=workname" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">性别</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="sex" name="=sex" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="phone" class="col-sm-2 control-label">手机号</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="phone" name="=phone" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="borndate" class="col-sm-2 control-label">出生日期</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="borndate" name="=borndate" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="nativeplace" class="col-sm-2 control-label">籍贯</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="nativeplace" name="=nativeplace" class=" form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="note" class="col-sm-2 control-label">备注</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="note" name="=note" class=" form-control">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button onclick="doadd()" type="button" class="btn btn-primary" id="baocun">添加</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        $("#user").bootstrapTable({
            height:450,
            url:"/getUser",
            pagination:true,
            sidePagination:"server",
            pageSize:5,
            pageNumber:1,
            pageList:[5,10],
            columns:[
                {
                  checkbox:true
                },
                {
                    field:"id",
                    title:"编号"
                },
                {
                    field:"username",
                    title:"姓名"
                },
                {
                    field:"state",
                    title:"状态",
                    formatter:function(value,row,index){
                        if(value==0){
                            return "启用"
                        }else {
                            return "禁用"
                        }
                    }
                },
                {
                    field:'workname',
                    title:'工作姓名'
                },
                {
                    field:'sex',
                    title:'性别'
                },
                {
                    field:'phone',
                    title:'电话'
                },
                {
                    field:'borndate',
                    title:'生日'
                },
                {
                    field:'mountguarddate',
                    title:'入职日期'
                },
                {
                    title:"操作",
                    formatter:function (value,row,index) {
                        return "<button class='btn  btn-primary' onclick='tofenpei("+row.id+")'><span class='glyphicon glyphicon-edit'></span>&nbsp;分配角色</button>&nbsp;&nbsp;<button class='btn  btn-primary' onclick='toupd(("+row.id+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;修改</button>"
                    }
                }
            ]
        });
    });
    let userId=0;
    function tofenpei(id) {
        userId =id;
        $.post("/tofenpei",{id},function(data){
            let s ="";
            for(let i=0;i<data.length;i++){
                let r = data[i];
                if(r.ischecked){
                    s = s + "<div class='radio-inline'><input  name='js' checked type='radio' value=" + r.id + "></input><label>" + r.rname + "</label></div>";
                }
                else
                {
                    s = s + "<div class='radio-inline'><input  name='js'  type='radio' value=" + r.id + "></input><label>" + r.rname + "</label></div>";
                }
            }
            $("#juesebody").html(s) ;
        });
        $("#fenpei").modal("show");
    }
    function dofenpei() {
        let roleId = $("[name=js]:checked").val();
        $.post("/dofenpei",{userId,roleId});
        $("#fenpei").modal("hide");
    }
    function toadd() {
        $("input[type=text]").val("");
        $("#t").html("添加用户");
        $("#baocun").html("添加");
        $("#baocun").attr("onClick","doadd()");
        $("#add").modal("show");
    }
    function doadd() {
        let username = $("#userName").val();
        let pwd = $("#pwd").val();
        let state = $("input[type='radio']:checked").val();
        let workname = $("#workname").val();
        let sex = $("#sex").val();
        let phone = $("#phone").val();
        let borndate = $("#borndate").val();
        let nativeplace = $("#nativeplace").val();
        let note = $("#note").val();
        let user = $("#user").bootstrapTable("getOptions");
        let offset = 0;
        let limit = user.pageSize;
        $.post("/addUser",{username,pwd,state,workname,sex,phone,borndate,nativeplace,note,offset,limit},function (data) {
            swal("添加成功！","","success");
            $("#user").bootstrapTable("load",data);
            $("#user").bootstrapTable("selectPage",user.pageNumber);
        });
        $("#add").modal("hide");
    }
    function dodel() {
        //获取用户选择的数据
        let rows = $("#user").bootstrapTable("getSelections");
        if(rows.length==0){
            swal("提示信息","请选择要删除的数据","warning");
        }else{
            swal({
                type:"warning",
                title:"提示信息",
                text:"你确定要删除码？",
                showCancelButton:true,
                confirmButtonText:"删除",
                confirmButtonColor:"#DD6B55",
                closeOnConfirm:false
            },function (isConfirm) {
                if(isConfirm){
                    let ids="";
                    rows.forEach(function (id) {
                        ids+=id.id+",";
                    });
                    let options = $("#user").bootstrapTable("getOptions");
                    let limit = options.pageSize;
                    let offset = 0;
                    $.post("/dodel",{ids,offset,limit},function (data) {
                        swal("删除成功","","success");
                        $("#user").bootstrapTable("load",data);
                        $("#user").bootstrapTable("selectPage",options.pageNumber);
                    });
                }
            })
        }
    }
    function toupd(id) {
        userId =id;
        $.post("/toupdate",{id},function (data) {
            $("#userName").val(data.username);
            $("#pwd").val(data.pwd);
            if(data.state===0){
                $("#state1").prop("checked","checked");
            }else {
                $("#state2").prop("checked","checked");
            }
            $("#workname").val(data.workname);
            $("#sex").val(data.sex);
            $("#phone").val(data.phone);
            $("#borndate").val(data.borndate);
            $("#nativeplace").val(data.nativeplace);
            $("#note").val(data.note);
        });
        $("#t").html("修改用户");
        $("#baocun").attr("onClick","doupd()");
        $("#baocun").html("修改");
        $("#add").modal("show");
    }
    function doupd() {
        let username = $("#userName").val();
        let pwd = $("#pwd").val();
        let state = $("input[type='radio']:checked").val();
        let workname = $("#workname").val();
        let sex = $("#sex").val();
        let phone = $("#phone").val();
        let borndate = $("#borndate").val();
        let nativeplace = $("#nativeplace").val();
        let note = $("#note").val();
        let user = $("#user").bootstrapTable("getOptions");
        let offset = 0;
        let limit = user.pageSize;
        $.post("/update",{"id":userId,username,pwd,state,workname,sex,phone,borndate,nativeplace,note,offset,limit},function (data) {
            swal("修改成功！","","success");
            $("#user").bootstrapTable("load",data);
            $("#user").bootstrapTable("selectPage",user.pageNumber);
        });
        $("#add").modal("hide");
    }
</script>
</html>
